<template>
  <van-cell-group title="血压（mmHg)和心率（次/分钟）">
    <van-field
      v-model="value.first"
      required
      placeholder="填写格式 收缩压-舒张压～心率"
      label="第一次测量:"
    />
    <van-field
      v-model="value.second"
      placeholder="填写格式 收缩压-舒张压～心率"
      label="第二次测量:"
    />
    <van-field
      v-model="value.third"
      placeholder="填写格式 收缩压-舒张压～心率"
      label="第三次测量:"
    />
  </van-cell-group>
</template>
<script setup lang="ts">
import { onBeforeMount, reactive, watch } from 'vue'

const model = defineModel<string>()
const value = reactive({
  first: '',
  second: '',
  third: ''
})
watch(
  () => value,
  () => {
    const arr = Object.values(value).filter(Boolean)
    const str = arr.join('#')
    if (str !== model.value) {
      model.value = str
    }
  },
  { deep: true }
)
onBeforeMount(() => {
  if (model.value) {
    const arr = model.value.split?.('#') ?? []
    value.first = arr[0] || ''
    value.second = arr[1] || ''
    value.third = arr[2] || ''
  }
})
</script>
